import React from 'react';
import PropTypes from 'prop-types';
import { Cascader } from 'antd';
import useMapData from '@/hooks/useMapData';

// import request from '@/utils/request';

// const cascaderData = require('@/utils/map/cascaderData.json');

const getOptions = cascaderData => {
    const china = {
        id: 0,
        parentId: 0,
        parentName: '',
        code: 'asian',
        dictKey: 'china',
        dictName: '中国',
        sort: 1,
        isLeaf: false,
        remark: '',
        children: []
    };
    const province = cascaderData.filter(v => v.code === 'province');
    const asian = cascaderData.filter(v => v.code === 'asian');
    china.children = province;
    return [china].concat(asian);
};
/**
 * 已废弃，请使用 import CityPicker from '@/components/CityPicker'
 * 联级选择器
 * 动态加载行政区域数据asian(国家) province(省份)，city(城市)，area(区)
 */
const CascaderLoad = React.forwardRef(({ disabled, onChange, value, cascaderProps }, ref) => {
    // const { asianData } = rest;
    // const [options, setOptions] = useState([]);

    // const fetchDic = async param => {
    //     const result = await request('/api/dict/v1/getList', {
    //         method: 'POST',
    //         data: param
    //     });
    //     if (result && result.code === 10000 && result.data) {
    //         return result.data || [];
    //     }
    //     return [];
    // };
    const handleChange = e => {
        onChange(e);
    };
    // const loadData = selectedOptions => {
    //     const targetOption = selectedOptions[selectedOptions.length - 1];
    //     targetOption.loading = true;
    //     let codeTmp = null;
    //     let isLeaf = false;
    //     const { code } = targetOption;
    //     switch (code) {
    //         case 'asian':
    //             codeTmp = 'province';
    //             break;
    //         case 'province':
    //             codeTmp = 'city';
    //             break;
    //         case 'city':
    //             codeTmp = 'area';
    //             isLeaf = true;
    //             break;
    //         default:
    //             codeTmp = null;
    //             isLeaf = false;
    //     }
    //     fetchDic({
    //         code: codeTmp,
    //         parentId: codeTmp === 'province' ? null : targetOption.id
    //     }).then(data => {
    //         targetOption.children = data.map(item => ({
    //             ...item,
    //             isLeaf
    //         }));
    //         targetOption.loading = false;
    //         setOptions([...options]);
    //     });
    // };
    // useEffect(() => {
    //     setOptions([china].concat(asianData) || [china]);
    // }, [asianData]);

    const [cascaderData] = useMapData('cascader');
    return (
        <div ref={ref} title={value && value.length > 0 ? value.join('/') : ''}>
            <Cascader
                disabled={disabled}
                value={value}
                fieldNames={{ label: 'dictName', value: 'dictName' }}
                options={getOptions(cascaderData)}
                onChange={handleChange}
                changeOnSelect
                // loadData={loadData}
                {...cascaderProps}
            />
        </div>
    );
});

CascaderLoad.propTypes = {
    onChange: PropTypes.func,
    /**
     * 国家字典数据
     */
    // asianData: PropTypes.array,
    cascaderProps: PropTypes.object
};

CascaderLoad.defaultProps = {
    onChange: () => {},
    cascaderProps: {}
};

export default CascaderLoad;
